
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首页</title>

    <style>
      a{
        text-decoration: none;
        color: black;
        font-size: 18px;
      }
      h3{
        width: 180px;
        height: 30px;
        margin: 100px auto;
        text-align: center;
        line-height: 38px;
        background: deepskyblue;
        border-radius: 5px;
      }
    </style>

    <%--    bootStrop 美化界面--%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <script>
      function check1(){
        var a = $("#userInfo").val();
        console.log(a);
        $.post({
          url:"${pageContext.request.contextPath}/user/check",
          data:{"user_code":$('input[name="user_code"]').val()},
          success:function (data){
            //console.log(data);
            if (data.toString()==='ok'){
              $("#userInfo").css("color","green");
            }else {
              $("#userInfo").css("color","red");
            }

            $("#userInfo").html(data);

          }
        })
      }

      function check2(){
        $.post({
          url:"${pageContext.request.contextPath}/user/check",
          data:{"user_code":$('input[name="user_code"]').val() , "user_pwd":$('input[name="user_pwd"]').val()},
          success:function (data){
            //console.log(data);
            if (data.toString()==='ok'){
              $("#pwdInfo").css("color","green");
            }else {
              $("#pwdInfo").css("color","red");
            }

            $("#pwdInfo").html(data);
          }
        })
      }
    </script>

  </head>
  <body>

  <div class="container">

    <div class="row clearfix">
      <div class="col-md-12 column">
        <div class="page-header">
          <h1>
            <small>书籍管理系统---------------------------登录界面</small>
          </h1>
        </div>
      </div>
    </div>

<%--  <form class="form-inline" action="${pageContext.request.contextPath}/user/login" method="post">--%>
<%--    <div class="form-group">--%>
<%--      <label class="sr-only" for="exampleInputEmail3">Email address</label>--%>
<%--      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email" name="user_code" onblur="check1()">--%>
<%--    </div>--%>
<%--    <span id="userInfo"></span>--%>
<%--    <div class="form-group">--%>
<%--      <label class="sr-only" for="exampleInputPassword3">Password</label>--%>
<%--      <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password" name="user_pwd" onblur="check2()" >--%>
<%--    </div>--%>
<%--    <span id="pwdInfo"></span>--%>
<%--    <button type="submit" class="btn btn-default">Sign in</button>--%>
<%--    <span style="color: #ff0000;font-weight:bold ">${error}</span>--%>
<%--  </form>--%>

    <form class="form-horizontal" action="${pageContext.request.contextPath}/user/login" method="post">

      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="user_code" onblur="check1()">
          <span id="userInfo"></span>
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="user_pwd" onblur="check2()">
          <span id="pwdInfo"></span>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
              <span style="color: #ff0000;font-weight:bold ">${error}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>

    </form>

  </div>

  </body>

</html>
